<template>
  <view class="default-font" :style="cssVariables">
    <view class="flex-row items-center header" v-if="question.header">
      <image
        :src="
          question.header === 'explain'
            ? '/static/icon/notice_pink.svg'
            : '/static/icon/notice_orange.svg'
        "
        class="header-icon"
      />
      <view class="ml-10 font-header">{{
        question.header === "explain" ? "说明" : "注意"
      }}</view>
    </view>
    <text class="self-start">{{ questionNum }}{{ question.content }}</text>

    <!-- 位于选项之上的特殊模块 -->
    <view>
      <view v-for="item in question.special" :key="item.type" class="mt-4">
        <!-- 图片 -->
        <view class="flex-row justify-center" v-if="item.type === 'image'">
          <image
            :src="getImageUrl(item.args.url)"
            class="special-image"
            :style="{
              height: imageOption.height ? imageOption.height + 'px' : 'auto',
            }"
            mode="widthFix"
            @load="onImageLoad"
          />
        </view>
        <!-- 脚注 -->
        <view v-else-if="item.type === 'footnote'" class="footnote-text">
          {{ item.args.text }}
        </view>
        <!-- 特殊模块 -->
        <view v-else-if="item.type === 'module'">
          <!-- 计时器模块 -->
          <Timer
            v-if="item.key === 'timer'"
            :args="item.args"
            @onStop="bindTimerStop"
          />
          <!-- <DrawPanel v-else-if="item.key === 'draw_panel'"></DrawPanel> -->
          <QuestionReader
            v-else-if="item.key === 'audio'"
            :content="item.args.content"
          >
            <template #active
              ><button style="width: 240rpx">点击播放</button></template
            >
            <template #inactive
              ><button style="width: 240rpx">点击播放</button></template
            >
          </QuestionReader>
          <VisionTester
            v-else-if="item.key === 'vision_tester'"
            :args="item.args"
          ></VisionTester>
        </view>
      </view>
    </view>

    <view :class="question.special ? 'mt-8' : 'mt-4'">
      <view v-if="question.type === 'choice'">
        <view
          v-for="index of Array.from(Array(numOptions).keys())"
          :key="index"
          class="mt-2 flex-row items-center self-stretch group_2"
          :class="{ 'option-selected': answer === optionHeaders[index] }"
          @click="changeChoice(optionHeaders[index])"
        >
          <view
            class="flex-col justify-center items-center choice-option-wrapper"
            ><text class="text_option">{{ optionHeaders[index] }}</text>
          </view>
          <text class="font ml-10">{{ options[index] }}</text>
        </view>
      </view>
      <view v-else-if="question.type === 'tf'">
        <view
          class="mt-2 flex-row items-center self-stretch group_2"
          :class="{ 'option-selected': answer === 'T' }"
          @click="changeChoice('T')"
        >
          <image
            class="tfchoice-icon"
            :src="
              answer === 'T'
                ? '/static/icon/tf_true.svg'
                : '/static/icon/tf_false.svg'
            "
          />
          <text class="font ml-10">{{ tf_text[0] }}</text>
        </view>
        <view
          class="mt-2 flex-row items-center self-stretch group_2"
          :class="{ 'option-selected': answer === 'F' }"
          @click="changeChoice('F')"
        >
          <image
            class="tfchoice-icon"
            :src="
              answer === 'F'
                ? '/static/icon/tf_true.svg'
                : '/static/icon/tf_false.svg'
            "
          />
          <text class="font ml-10">{{ tf_text[1] }}</text>
        </view>
      </view>
      <view v-else-if="question.type === 'blank'">
        <input :value="answer" @input="onInputAnswer" class="input_wrapper" />
      </view>
      <view v-else-if="question.type === 'slider'">
        <QuestionSlider
          :min="question.args.min"
          :max="question.args.max"
          :interval="question.args.interval || 1"
          :value="answer"
          @input="changeAnswer"
        />
      </view>
    </view>
  </view>
</template>

<script>
import Timer from "../../../components/Questionnare/Timer/Timer.vue";
import DrawPanel from "../../../components/Questionnare/DrawPanel/DrawPanel.vue";
import QuestionReader from "../../../components/Questionnare/QuestionReader/QuestionReader.vue";
import VisionTester from "../../../components/Questionnare/VisionTester/VisionTester.vue";
import QuestionSlider from "../../../components/Questionnare/QuestionSlider/QuestionSlider.vue";
import { getKeyword } from "../../../util/questionnaire/index.js";
export default {
  name: "QuestionBody",
  components: { Timer, DrawPanel, QuestionReader, VisionTester, QuestionSlider },
  props: {
    question: {
      type: Object,
      validator(value) {
        return (
          value.hasOwnProperty("id") &&
          value.hasOwnProperty("content") &&
          value.hasOwnProperty("type") &&
          ["choice", "tf", "blank", "plain", "slider"].includes(value.type)
        );
      },
    },
    tf_options: {
      type: Array,
      default: () => ["是", "否"],
    },
    answer: {
      type: String,
      default: "",
    },
    number: {
      type: Number,
      default: -1,
    },
    fontSize: {
      type: Number,
      default: 30,
    },
  },
  data() {
    return {
      optionHeaders: ["A", "B", "C", "D", "E", "F", "G"],
      timer: {
        interval: null,
        currentTime: 0,
        running: false,
      },
      imageOption: {
        height: null,
      }
    };
  },
  // created() {
  //   console.log("fontSize", this.fontSize);
  //   this.$refs.componentRoot.style.setProperty("--fontSize", this.fontSize.toString() + "rpx");
  // },
  emits: ["update:answer"],
  methods: {
    changeChoice(newChoice) {
      if (newChoice === this.answer) {
        newChoice = "";
      }
      this.changeAnswer(newChoice);
    },
    changeAnswer(newAnswer) {
      console.log("changeAnswer", newAnswer);
      this.$emit("update:answer", newAnswer);
    },
    onInputAnswer(event) {
      this.$emit("update:answer", event.target.value);
    },
    bindTimerStop(e) {
      console.log("Timer stop", e);
      if (e.index != null && e.index !== -1) {
        if (this.question.type === "choice") {
          this.changeAnswer(this.optionHeaders[e.index]);
        } else {
          this.changeAnswer(["T", "F"][e.index]);
        }
      }
    },
    getImageUrl(name) {
      if (name && name[0] === "$") {
        return this.$requests.getImageUrl(name.slice(1));
      } else {
        return name;
      }
    },
    onImageLoad(e) {
      const { width, height } = e.detail;
      // 根据固定宽度计算等比高度
      this.imageHeight = (height / width) * this.fixedWidth;
    },
    onSliderChange(e) {
      this.$emit("update:answer", e.detail.value.toString());
    },
  },
  computed: {
    tf_text() {
      return this.question.tf_options ?? this.tf_options;
    },
    questionNum() {
      return this.number === -1 ? "" : this.number.toString() + ". ";
    },
    numOptions() {
      return this.question.options.length;
    },
    options() {
      // 解析选项
      const options = this.question.options;
      for (const index in options) {
        const option = options[index];
        if (option && option[0] === "$") {
          options[index] = getKeyword(option.slice(1));
        }
      }
      return options;
    },
    cssVariables() {
      return {
        "--fontSize": this.fontSize.toString() + "rpx",
      };
    },
  },
};
</script>

<style scoped>
.text_option {
  font-size: 30rpx;
  font-family: Arial;
}

.header {
  margin-bottom: 10rpx;
}

.default-font {
  font-size: var(--fontSize);
}

.footnote-text {
  font-size: calc(var(--fontSize) * 0.9);
  color: #666666;
  margin-top: 8rpx;
  display: block;
}

/* .font {
  font-size: var(--fontSize);
} */

.font-header {
  /* font-size: var(--fontSize); */
  font-weight: bold;
}

.slider-container {
  margin-top: 20rpx;
  padding: 0 20rpx;
}

.slider {
  margin: 10rpx 0;
}

.header-icon {
  width: 48rpx;
  height: 48rpx;
}

.group_2 {
  padding: 12rpx 8rpx;
}

.tfchoice-icon {
  width: 48rpx;
  height: 48rpx;
}

.option-selected {
  background-color: #ffeded;
  border-radius: 24rpx;
}

.option-selected view {
  color: #99434b;
  border-color: #99434b;
}

.option-selected text {
  color: #99434b;
}

.input_wrapper {
  align-self: stretch;
  margin-top: 25.82rpx;
  border-radius: 24rpx;
  border: solid 2rpx #333333;
}

.special-image {
  width: 500rpx;
  border-radius: 24rpx;
}

.choice-option-wrapper {
  padding: 8rpx 0;
  border-radius: 50%;
  width: 42rpx;
  height: 42rpx;
  border-left: solid 2rpx;
  border-right: solid 2rpx;
  border-top: solid 2rpx;
  border-bottom: solid 2rpx;
}
</style>